﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title-后台登录</title>
    <link rel="shortcut icon" type="~/Content/image/header_logo.png" href="~/Content/image/header_logo.png" />
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <link href="~/Content/login.css" rel="stylesheet" />
    <style>
        /* 覆盖原框架样式 */

        .layui-elem-quote {
            background-color: inherit !important;
        }

        .layui-input,
        .layui-select,
        .layui-textarea {
            background-color: inherit;
            padding-left: 30px;
        }

        #imgcode {
            padding-left: 30px;
        }
    </style>
    <!--[if lte IE 8]>
        <div id="errorie"><div>您还在使用老掉牙的IE，正常使用系统前请升级您的浏览器到 IE8以上版本 <a target="_blank" href="http://windows.microsoft.com/zh-cn/internet-explorer/ie-8-worldwide-languages">点击升级</a>&nbsp;&nbsp;强烈建议您更改换浏览器：<a href="http://down.tech.sina.com.cn/content/40975.html" target="_blank">谷歌 Chrome</a></div></div>
    <![endif]-->
</head>
<body>
    <!-- Head -->
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-sm12 layui-col-md12 zyl_mar_01">
                <blockquote class="layui-elem-quote">@ViewBag.Title-后台登录</blockquote>
            </div>
        </div>
    </div>
    <!-- Head End -->
    <!-- Carousel -->
    <div class="layui-row">
        <div class="layui-col-sm12 layui-col-md12">
            <div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin">
                <div carousel-item="">
                    <div>
                        <div class="zyl_login_cont"></div>
                    </div>
                    <div>
                        <img src="~/Content/carousel/01.jpg" />
                    </div>
                    <div>
                        <div class="background">
                            <span></span><span></span><span></span>
                            <span></span><span></span><span></span>
                            <span></span><span></span><span></span>
                            <span></span><span></span><span></span>
                        </div>
                    </div>
                    <div>
                        <img src="~/Content/carousel/03.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Carousel End -->
    <!-- Footer -->
    <div class="layui-row">
        <div class="layui-col-sm12 layui-col-md12 zyl_center zyl_mar_01">
            @ViewBag.CopyRight&nbsp;<a href="http://beian.miit.gov.cn/" target="_blank" style="color:#000;">你的备案号</a>
        </div>
    </div>
    <!-- Footer End -->
    <!-- LoginForm -->
    <div class="zyl_lofo_main">
        <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
            <legend>欢迎登陆 - @ViewBag.Title</legend>
        </fieldset>
        <div class="layui-row layui-col-space15">
            <form class="layui-form zyl_pad_01" action="">
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-form-item">
                        <input type="text" name="userName" id="txt_account" lay-verify="required|userName" autocomplete="off" placeholder="用户名" class="layui-input">
                        <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-form-item">
                        <input type="password" name="nuse" id="txt_password" lay-verify="required|pass" autocomplete="off" placeholder="密码" class="layui-input">
                        <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <div class="layui-row">
                        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                            <div class="layui-form-item">
                                <input type="text" name="vercode" id="vercode" lay-verify="required|vercodes" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
                                <i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
                            </div>
                        </div>
                        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                            <img id="imgcode" class="authcode" src="~/Admin/Login/GetAuthCode" width="80" height="40" />
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md12">
                    <button class="layui-btn layui-btn-fluid" lay-submit="" id="btnLogin" lay-filter="demo1"><span>登录</span></button>
                </div>
            </form>
        </div>
    </div>
    <!-- LoginForm End -->
    <!-- Jquery Js -->
    <script src="~/Content/pagination/script/lib/jquery.min.js"></script>
    <!-- Layui Js -->
    <script src="~/Content/layui/layui.js"></script>
    <!-- Jqarticle Js -->
    <script src="~/Content/js/jparticle.min.js"></script>
    <script>
        //获取焦点
        window.onload = function () {
            var oInput = document.getElementById("txt_account");
            oInput.focus();
        };

        //屏蔽浏览器右键菜单
        document.oncontextmenu = function () {
            return false;
        }

        layui.use(['carousel', 'form'], function () {
            var carousel = layui.carousel,
                form = layui.form;

            //自定义验证规则
            form.verify({
                userName: function (value) {
                    if (value.length < 5) {
                        return '账号至少得5个字符';
                    }
                },
                pass: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
                content: function (value) {
                    layedit.sync(editIndex);
                }
            });

            //监听提交
            form.on('submit(demo1)', function (data) {
                var $username = $("#txt_account");
                var $password = $("#txt_password");
                var $code = $("#vercode");
                var loadIndex;
                $.ajax({
                    url: "/Admin/Login/CheckLogin",
                    data: { username: $.trim($username.val()), password: $.trim($password.val()), code: $.trim($code.val()) },
                    type: "post",
                    dataType: "json",
                    timeout: 20000,
                    cache: false,
                    beforeSend: function () {
                        //提交数据之前
                        loadIndex = layer.msg('加载中..', {
                            icon: 16,
                            shade: 0.3,
                            time: false
                        });
                        $("#btnLogin").attr("disabled", "disabled").find('span').html("loading...");
                    },
                    success: function (data) {
                        if (data.type) {
                            $("#btnLogin").find('span').html("登录成功，正在跳转...");
                            window.location.href = '@Url.Action("Index", "AdminHome")';
                        } else {
                            $("#btnLogin").removeAttr('disabled').find('span').html("登录");
                            $("#imgcode").trigger("click");
                            $("#vercode").val("");
                            layer.msg(data.msg, { icon: 2, time: 3000 });
                        }
                    },
                    complete: function () {
                        //回调后关闭looding加载
                        layer.close(loadIndex);
                    },
                    error: function (data) {
                        var error = "响应超时,请刷新重试";
                        layer.msg(error, { icon: 5, time: 4000 });
                        $("#btnLogin").find('span').html("响应超时,请刷新重试");
                    }
                });
                return false;
            });

            //验证码
            $(".authcode").click(function () {
                $("#imgcode").attr("src", "/Admin/Login/GetAuthCode?time=" + Math.random());
            });

            //设置轮播主体高度
            var zyl_login_height = $(window).height() / 1.3;
            var zyl_car_height = $(".zyl_login_height").css("cssText", "height:" + zyl_login_height + "px!important");


            //Login轮播主体
            carousel.render({
                elem: '#zyllogin' //指向容器选择器
                    ,
                width: '100%' //设置容器宽度
                    ,
                height: 'zyl_car_height',
                arrow: 'always' //始终显示箭头
                    ,
                anim: 'fade' //切换动画方式
                    ,
                autoplay: true //是否自动切换false true
                    ,
                arrow: 'hover' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
                    ,
                indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
                    ,
                interval: '5000' //自动切换时间:单位：ms（毫秒）
            });

            //监听轮播--案例暂未使用
            carousel.on('change(zyllogin)', function (obj) {
                var loginCarousel = obj.index;
            });

            //粒子线条
            $(".zyl_login_cont").jParticle({
                background: "rgba(0,0,0,0)", //背景颜色
                color: "#fff", //粒子和连线的颜色
                particlesNumber: 100, //粒子数量
                //disableLinks:true,//禁止粒子间连线
                //disableMouse:true,//禁止粒子间连线(鼠标)
                particle: {
                    minSize: 1, //最小粒子
                    maxSize: 3, //最大粒子
                    speed: 30, //粒子的动画速度
                }
            });
            console.log("\u002f\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u000d\u000a\u0020\u002a\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u000d\u000a\u0020\u002a\u0020\u0009\u0009\u6e05\u4e91\u56ed\u7248\u6743\u6240\u6709\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u000d\u000a\u0020\u002a\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u0009\u000d\u000a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002a\u002f");
        });
    </script>
</body>

</html>
